<template>
  <div class="hot-tags">
    <HotTag :list="list" >
      <template #titleleft>本周热度 Top5</template>
      <template #contentleft="{item}">
          <p>{{ item.name }}</p>
      </template>
      <template #contentright="{item}"><p>{{ item.value }}</p></template>
    </HotTag>
    <HotTag :list="arr">
<template #titleleft>可能感兴趣的人</template>
<template #titleright>换一批</template>
<template #contentleft="{item}">
     <div class="left">
            <h4>{{ item.name }} <span style="font-weight: 200;font-size: 12px;">{{ item.age }}岁</span></h4>
            <p>研究领域：{{ item.major }}</p>
            <p>{{ item.school }} · {{ item.honour }}</p>
          </div>
          <div class="right">
            <p>+关注</p>
          </div>
</template>
    </HotTag>
  </div>
</template>

<script>
import HotTag from './components/HotTag.vue';

export default {
  components: { HotTag },
  data() {
    return {
      list: [
        { name: '#区块链', value: '96' },
        { name: '#数据挖掘', value: '91' },
        { name: '#无人机', value: '87' },
        { name: '#生命科学', value: '72' },
        { name: '#传感器', value: '60' }
      ],
      arr:[
        {
          id: 1,
          name: "李国盛",
          age: 52,
          major: "机电一体化技术",
          school: "清华大学",
          honour: "教授",
        },
        {
          id: 2,
          name: "陈颖",
          age: 52,
          major: "人工智能",
          school: "北京大学",
          honour: "副教授",
        },
      ],
    };
  }
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.hot-tags {
  width: 375px;
  margin: 0 auto;
}
.left{
  p{
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.right{
  transform: translateY(35%);
  p{
  background-color: #3192ff;
  border-radius: 20px;
  padding:5px 10px 5px 10px;
  border: 0;
}
}

</style>
